<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="../../../../../../0.resource/test/vuetest/build/check-versions.js"></script>
    <script src="../../../../../../0.resource/test/vuetest/build/build.js"></script>
</head>
<body>
<div id="app">
    <div>normal: {{message}}</div>
    <!--    <div>reverse:{{message.split('').reverse().join('')}}</div>-->
    <div>reverse:{{reversedMessage}}</div>
    <div>渲染次数：{{counter}}</div>
    <input v-model="other"/>
</div>

</body>
<script src="../../../lib/vue.js"></script>
<script>
    /*
     *  普通方法和计算属性的区别
     *      1. 使用普通方法，只要数据有变化，视图就被重新渲染，普通方法也随之执行
     *      2. 对于计算属性来说，只有和他关联的数据变化了，计算属性才会被重新计算，
     *       而其他的数据变化并不会带来计算属性的冲洗计算
    * */
    new Vue({
        el: '#app',
        data: {
            message: 'hello',
            other:'test',
            counter: 0
        }, methods: {
            messageReverse: function () {
                this.counter += 1;
                return this.message.split('').reverse().join('');
            }
        }, computed: {
            reversedMessage:function () {
                this.counter += 1;
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>
</html>